<!-- 区级总览 -->
<template>
    <div class="AllViewBox">
        <div class="top">
            <span class="pageName">总览</span>
        </div>
        <!-- 卡片 -->
        <div class="totalData">
            <div class="card" v-for="(item, index) in cardArr" :key="index">
                <div class="content">
                    <div class="contentData">
                        <!-- 卡片名称 -->
                        <span class=" pageName">{{ item.name }}</span>
                        <div :class="item.class">
                            <span :class="item.iconfont"></span>
                        </div>
                    </div>
                    <span class="number">{{ item.number }}</span>
                </div>
                <div class="progressBar">
                    <el-progress :percentage="item.percentage" :color="item.color" :show-text="false" :stroke-width='4' />
                </div>
            </div>
        </div>
        <!-- 图表 -->
        <div class="diagram">
            <div class="chart">
                <span class="pageName chartName">信息登记发展趋势</span>
                <div ref="message" class="chartBox"></div>
            </div>
            <div class="chart">
                <span class="pageName chartName">患者病例类型分布</span>
                <div ref="patient" class="chartBox"></div>
            </div>
            <div class="chart">
                <span class="pageName chartName">密集人员类型分布</span>
                <div ref="intensive" class="chartBox"></div>
            </div>
            <div class="chart">
                <span class="pageName chartName">密集者地域分布</span>
                <div ref="area" class="chartBox">
                    <!-- <img src="../../assets/wang/images/map.png" alt="" class="map"> -->
                </div>
            </div>
        </div>
        <!-- 表格  -->
        <div class="tableBox">
            <span class="pageName">通知公告</span>
            <el-table :data="noticeData" border style="width: 100% "
                :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '60px' }">
                <el-table-column align="center" type="index" label="序号" min-width="15%" />
                <el-table-column align="center" prop="noticeTitle" label="标题" />
                <el-table-column align="center" prop="createDate" label="发布日期" >
                    <template #default="scope">
                        {{ parseTime(scope.row.createDate,'{y}-{m}-{d}') }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="default" @click="viewData(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed, reactive, toRefs, onBeforeMount } from 'vue';

import axios from '@/util/http'
// 引入echarts
import * as echarts from 'echarts';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import {parseTime} from '@/util/date'
 export default defineComponent({
    name: 'AllView',
    setup() {
        // 数据
        const state = reactive({
            // 卡片
            cardArr: [
                {
                    name: '今日新增确诊病例数（人）',
                    number: null,
                    iconfont: 'iconfont icon-quezhen',
                    percentage: 100,
                    color: '#3c8bff',
                    class: 'icon newly'
                },
                {
                    name: '今日新增密接人员（人）',
                    number: null,
                    iconfont: 'iconfont icon-mijie',
                    percentage: 100,
                    color: '#facd91',
                    class: 'icon touch'
                },
                {
                    name: '今日解除隔离（人）',
                    number: null,
                    iconfont: 'iconfont icon-jiechu',
                    percentage: 100,
                    color: '#46d254',
                    class: 'icon relieve'
                },
                {
                    name: '异常预警数（个）',
                    number: null,
                    iconfont: 'iconfont icon-yichang',
                    percentage: 65,
                    color: '#d9001b',
                    class: 'icon abnormal'
                },
            ],
            // 图表
            message: ref(),
            patient: ref(),
            intensive: ref(),
            area: ref(),
            // 信息登记
            xAxis: {
                type: 'category',
                data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06']
            },
            messageSeries: [
                {
                    name: '确诊患者',
                    type: 'line',
                    data: [400, 900, 240, 820, 109],
                    smooth: true
                },
                {
                    name: '密接人员',
                    type: 'line',
                    data: [900, 480, 520, 800, 820, 400],
                    smooth: true
                }
            ],
            // 患者病例类型分布
            patientSeries: [
                {
                    name: '患者病例类型分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        normal: {
                            color: function (colors: any) {
                                var colorList = [
                                    '#73a0fa',
                                    '#73deb3',
                                ];
                                return colorList[colors.dataIndex];
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inner', // 数值显示在内部
                            formatter: '{c}', // 格式化数值
                        },
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 613, name: '普通病例' },
                        { value: 677, name: '协查病例' },
                    ]
                }
            ],
            // 密接人员
            intensiveSeries: [
                {
                    name: '密接人员',
                    type: 'pie',
                    radius: '50%',
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        normal: {
                            color: function (colors: any) {
                                var colorList = [
                                    '#73a0fa',
                                    '#73deb3',
                                    '#7585a2',
                                ];
                                return colorList[colors.dataIndex];
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inner', // 数值显示在内部
                            formatter: '{c}', // 格式化数值
                        },
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 529, name: '密接' },
                        { value: 990, name: '次密' },
                        { value: 65, name: '一般' }
                    ],
                }
            ],
            areaOption: {},

            // 总览表格
            noticeData: [] as any,

            // 当前日期
            date: ref('')
        })

        const store = useStore();
        const router = useRouter();


        // 初始化图表
        const init = (registerMap: any, path: any) => {
            // 信息登记
            let messageChart = echarts.init(state.message);
            // 患者病例
            let patientChart = echarts.init(state.patient);
            // 密接人员
            let intensiveChart = echarts.init(state.intensive);
            // 密接者地域
            let areaChart = echarts.init(state.area);

            // 指定图表的配置项和数据
            // 信息登记
            let messageOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: ['确诊患者', '密接人员']
                },
                xAxis: state.xAxis,
                yAxis: {
                    min: 0,
                    max: 300,
                    splitNumber: 5,
                    interval: 60,
                    type: 'value',
                },
                series: state.messageSeries
            };
            // 患者病例类型分布
            let patientOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 'right',
                    y: 'center'
                },
                series: state.patientSeries
            };
            // 密接人员
            let intensiveOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 'right',
                    y: 'center'
                },
                series: state.intensiveSeries
            };
            // 密接者地域
            echarts.registerMap(registerMap, path)
            let areaOption = state.areaOption;

            // 使用刚指定的配置项和数据显示图表。
            messageChart.setOption(messageOption);
            patientChart.setOption(patientOption);
            intensiveChart.setOption(intensiveOption);
            areaChart.setOption(areaOption);
        }


        // 重绘
        const dispose = () => {
            echarts.init(state.message).dispose();
            echarts.init(state.patient).dispose();
            echarts.init(state.intensive).dispose();
            echarts.init(state.area).dispose();
        }

        // 查看详情
        const viewData = (row: any) => {
            let noticeId = row.noticeId
            router.push({ path: '/noticedetail', query: { noticeId } })
        }


        onBeforeMount(async () => {
            // 地图
            state.areaOption = store.state.wang.xiangchengAreaOption;

            // 图表
            await axios({
                method: "post",
                url: "overview/findoverview",
                params: {
                    district: '相城'
                }
            })
                .then(res => {
                    console.log(res)

                    if (res.data.msg == '查询成功') {
                        // 卡片
                        state.cardArr[0].number = res.data.data.overViewMap['今日新增确诊病例数（人）']
                        state.cardArr[1].number = res.data.data.overViewMap['今日新增密接人员（人）']
                        state.cardArr[2].number = res.data.data.overViewMap['今日解除隔离（人）']
                        state.cardArr[3].number = res.data.data.overViewMap['异常预警数（个）']

                        // 信息登记
                        state.xAxis.data = res.data.data.timeList
                        state.messageSeries[0].data = res.data.data.confirmedNumList
                        state.messageSeries[1].data = res.data.data.contactNumList


                        // 患者病例分布
                        state.patientSeries[0].data[0].value = res.data.data.overViewMap['普通病例数'];
                        state.patientSeries[0].data[1].value = res.data.data.overViewMap['协查病例数'];

                        // 密接人员
                        state.intensiveSeries[0].data[0].value = res.data.data.overViewMap['密接人员总数'];
                        state.intensiveSeries[0].data[1].value = res.data.data.overViewMap['次密接人员总数'];
                        state.intensiveSeries[0].data[2].value = res.data.data.overViewMap['一般接触人员总数'];

                        dispose();

                        if (localStorage.getItem('area') == '相城区') {
                            // 初始化图表
                            init('xiangcheng', require('@/assets/wang/map/xiangcheng.json'));
                        } else if (localStorage.getItem('area') == '姑苏区') {
                            init('gusu', require('@/assets/wang/map/gusu.json'));
                        } else if (localStorage.getItem('area') == '虎丘区') {
                            init('huqiu', require('@/assets/wang/map/huqiu.json'));
                        } else if (localStorage.getItem('area') == '吴中区') {
                            init('wuzhong', require('@/assets/wang/map/wuzhong.json'));
                        } else if (localStorage.getItem('area') == '吴江区') {
                            init('wujiang', require('@/assets/wang/map/wujiang.json'));
                        }

                    }
                })
            // 表格
            await axios({
                method: 'get',
                url: 'notice/findNoticeList',
                params: {
                    currentPage: 1,
                    pageSize: 10
                }
            })
                .then((res) => {
                    res.data.data.data.list.forEach(element => {
                        if (element.status == '1') {
                            state.noticeData.push(element)
                        }
                    });
                })

        });

        return {
            ...toRefs(state),
            parseTime,
            viewData
        }
    }

})
</script>

<style lang="less" scoped>
.displayShow {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.AllViewBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    // 页面名称
    .pageName {
        font-size: 13px;
        color: #333333;
        font-weight: 400;
    }

    // 页面上方
    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    // 卡片
    .totalData {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;

        .card {
            .displayShow();
            width: 23%;
            height: 121px;
            background: white;


            // 内容
            .content {
                .displayShow ();

                //数据
                .contentData {
                    width: 90%;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    margin-left: 20px;
                    position: relative;
                    font-size: 13px;

                    // 图标
                    .icon {
                        position: absolute;
                        right: 15px;
                        width: 29px;
                        height: 29px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 5px;
                    }

                    .newly {
                        background: #3c8bff;
                    }

                    .touch {
                        background: #facd91;
                    }

                    .relieve {
                        background: #46d254;
                    }

                    .abnormal {
                        background: #d9001b;
                    }

                    .iconfont {
                        color: white;
                    }
                }

                .number {
                    font-size: 28px;
                    width: 240px;
                    display: flex;
                    margin-left: 20px;
                }
            }

            // 进度条
            .progressBar {
                width: 85%;
                margin-left: 20px;
            }
        }
    }

    // 图表名称
    .chartName {
        margin-left: 15px;
        font-size: 13px;
    }

    // 图表
    .diagram {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-size: 13px;

        // 图表
        .chart {
            width: 49%;
            height: 324px;
            background: white;
            margin-top: 20px;
            padding: 10px 0px;
        }

        // 图表
        .chartBox {
            width: 85%;
            height: 280px;
            margin-left: 15px;
            font-size: 13px;
        }

        // 地图
        .map {
            width: 520px;
            height: 280px;
            font-size: 13px;
        }
    }

    // 表格
    .tableBox {
        margin-top: 20px;
        background: white;
        padding: 20px 20px;


        .el-table {
            margin-top: 20px;
            font-size: 13px;
        }
    }
}
</style>